<template>
    <div>
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/index/home' }">首页</el-breadcrumb-item>
        </el-breadcrumb>
        <br>

        <el-row class="margintop20">
            <el-col>
                 <el-carousel :interval="4000" type="card" height="400px">
                 <el-carousel-item v-for="(item,i) in banner" :key="i">
                  <div class="mydiv">
                            <img :src="item.imgUrl" alt="">
                            <h4 class="text">{{item.text}}</h4>
                        </div>
                 </el-carousel-item>
                </el-carousel>
               
            </el-col>
        </el-row>
    </div>
</template>
<script>
import {gethomebanner} from "@/api"
export default {
    data(){
        return {
            banner:[]
        }
    },
    mounted(){
        gethomebanner()
        .then(res=>{
            if(res.type){
                this.banner = res.result;
            }
        })
    }
}
</script>

<style lang="scss">
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

    .text{
            position: absolute;
            width:100%;
            height:375px;
            top:0;
            left:25px;
            font-size: 50px;
            color:#fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }  

</style>